<template>
  <div class="dashboard">
    <Row style="margin-bottom: 16px">
      <Col span="6" v-for="(item,index) in headerList" :key="index" style="padding: 0 10px;">
        <Card :bordered="false">
          <div class="card-body">
            <div class="card_title">
              <span>{{item.title}}</span>
              <div class="tag">{{item.date}}</div>
            </div>
            <div class="card_body">
              <div class="number">{{item.yesterday}}</div>
              <div class="update">
                <p>
                  日环比 {{item.today_ratio}} %
                  <span class="iconfont" :class="item.today_ratio<0?'icon-arrow-down-filling':'icon-arrow-up-filling'"></span>
                </p>
                <p>
                  周环比 {{item.week_ratio}} %
                  <span class="iconfont" :class="item.week_ratio<0?'icon-arrow-down-filling':'icon-arrow-up-filling'"></span>
                </p>
              </div>
            </div>
            <div class="card_foot">
              <span>{{item.total_name}}</span>
              <span>{{item.total}}</span>
            </div>
          </div>
        </Card>
      </Col>
    </Row>
    <Row style="margin-bottom: 16px">
      <Col span="3" v-for="(item,index) in useList" :key="index" style="padding: 0 10px;">
        <div class="card" @click="jumpUsePath(item.use_path)">
          <span class="iconfont" :class="item.use_icon"></span>
          <div class="title">{{item.title}}</div>
        </div>
      </Col>
    </Row>
    <Row>
      <Col span="24">
        <div class="order_card">
          <div class="card_title">
            <div>
              <span class="iconfont icon-tubiao-zhuzhuangtu"></span>
              <span>订单</span>
            </div>
            <div>
              <span class="btn" v-for="item in orderList" :key="item.value" :class="orderIndex===item.value?'active':''" @click="checkOrder(item.value)">{{item.title}}</span>
            </div>
          </div>
          <order ref="order" :index="orderIndex" />
        </div>
      </Col>
    </Row>
    <Row>
      <Col span="16">
        <div class="user_card">
          <div class="card_title">
            <div>
              <span class="iconfont icon-tubiao-zhexiantu"></span>
              <span>用户</span>
            </div>
          </div>
          <user ref="user" />
        </div>
      </Col>
      <Col span="8">
        <div class="buy_card">
          <div class="card_title">
            <div>
              <span class="iconfont icon-tubiao-bingtu"></span>
              <span>购买用户统计</span>
            </div>
          </div>
          <buy ref="buy" />
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
  import headerList from '../../apiData/dashboard/header.js'
  import useList from '../../apiData/dashboard/use.js'
  import order from './module/order.vue'
  import user from './module/user.vue'
  import buy from './module/buy.vue'
  export default {
    name: "dashboard",
    data() {
      return {
        headerList: [],
        useList: [],
        orderIndex: 0,
        orderList: [
          { value: 0, title: '30天' },
          { value: 1, title: '周' },
          { value: 2, title: '月' },
          { value: 3, title: '年' }
        ]
      }
    },
    components: {
      order,
      user,
      buy
    },
    created() {
      this.getData()
    },
    mounted() {
      window.onresize = () => (() => {
        this.$refs.order.getData(this.orderIndex);
        // this.$refs.user.getData();
        // this.$refs.buy.getData();
      })();
    },
    methods: {
      getData() {
        this.headerList = headerList;
        this.useList = useList
      },
      jumpUsePath(path) {
        if(path) {
          this.$router.push(path)
        }else{
          this.$Message.warning('您没有访问权限！')
        }
      },
      checkOrder(index) {
        this.orderIndex = index;
        this.$refs.order.getData(index);
        // console.log(this.$refs);
      }
    }
  }
</script>

<style scoped lang="scss">
  .dashboard {
    /deep/ .ivu-card-body{
      background: transparent;
      padding: 0;
    }
    .card-body{
      padding: 16px;
      .card_title{
        margin-bottom: 10px;
        padding-bottom: 10px;
        .tag{
          border: 1px solid #499c54;
          color: #499c54;
          padding: 0 4px;
          border-radius: 3px;
          font-size: 10px;
        }
      }
      .card_foot{
        margin-top: 10px;
        padding-top: 10px;
      }
    }
    .card_title,
    .card_foot{
      display: flex;
      align-items: center;
      justify-content: space-between;

    }
    .card_body{
      padding-left: 5px;
      .number{
        font-size: 30px;
      }
      .update{
        span.iconfont{
          font-size: 12px;
        }
        span.icon-arrow-up-filling{
          color: #ed4014;
        }
        span.icon-arrow-down-filling{
          color: #19be6b;
        }
      }
    }
    .card{
      border-radius: 4px;
      text-align: center;
      padding: 16px;
      transition: all 0.5s;
      cursor: pointer;
      span.iconfont{
        font-size: 26px;
        color: #8DA1B3;
      }
      .title{
        margin-top: 8px;
      }
    }
    .card:hover{
      box-shadow: 0 1px 3px 1px #ddd;
    }
    .buy_card,
    .user_card,
    .order_card{
      border-radius: 4px;
      margin: 10px;
      .card_title{
        height: 50px;
        display: flex;
        align-items: center;
        padding: 0 20px;
        span.iconfont{
          font-size: 12px;
          margin-right: 5px;
          padding: 3px;
          border-radius: 50%;
          color: #1890ff;
          background: rgba(24, 144, 255, 0.1);
        }
        span.btn{
          margin-left: 8px;
          color: #666;
          cursor: pointer;
        }
        span.active,
        span.btn:hover{
          color: #1890ff;
        }
      }
    }
  }
</style>
<style scoped lang="scss">
  .ivu-row{
    .ivu-col{
      /*border: 1px solid red;*/
    }
  }
</style>
